<template>
    <div>
        <slot></slot>
        <a-form :form="form" :labelCol="labelCol" :wrapperCol="wrapperCol" :ref="componentRef">
        </a-form>
        <LiconSelect ref="liconSelect"></LiconSelect>
    </div>
</template>
<script>

import LiconSelect from '@/components/lt/LIconSelect.vue'
import EchFormCol from './EchFormCol'

export default {
    name:'EchGridForm',
    components:{LiconSelect,EchFormCol},
    props:{
        labelCol:{
            type:Object,
            default:()=>{
                return {sm: { span: 4 }}
            }
        },
        wrapperCol:{
            type:Object,
            default:()=>{
                return {sm: { span: 20 }}
            }
        },
        componentRef:[String,Number],
        changeEvent:{
            type:String,
            default:()=>{
                return "changeEventHandler"
            }
        },
        entityClassName:{
            type:String,
            required: true
        },
    },
    data(){
        return{
            form:{},
            changeItem:{},//表单中当前改变值的组件，键值对
            that:this
        }
    },
   
    created(){
        this.form=this.$form.createForm(this,{onValuesChange:this.valueChange}) 
    },
    methods:{
        getForm(){
            return this.form
        },
        valueChange(props, values){
            debugger
            this.changeItem = values
            this.changeEventHandler()
        },
        changeEventHandler(){
            debugger
            if(this.changeItem){

                let item = JSON.parse(JSON.stringify(this.changeItem))
                if(Object.getOwnPropertyNames(item).length==1){
                    this.$emit(this.changeEvent,item)
                }
            }
        },
        clickEventHandler(field,form){
            this.$emit("onClick",field,form)
        },
        showIconSelect(field,form){
            this.$refs['liconSelect'].show(field,form)
        },
        onChoose(){
            this.$emit('click',this.component)
        },
      
    }
}
</script>

<style scoped>
    .form-col{
        border: rgb(209, 208, 208) 1px dashed ;
        min-height:150px;
        padding: 10px;
    }
    .colLabel{
        color: var(--primary-color);
        font-size: 16px;
        margin-bottom: 14px;
        text-align: left;cursor:pointer;
    }
</style>